<template>
  <div class="wrapper">
    <div class="header">{{ role?.role_name }}</div>
    <div class="scroll">
      <a-avatar shape="square" size="64" :src="role?.avatar"></a-avatar>
      <p class="desc">
        <a-tag color="processing"> 角色介绍 </a-tag>{{ role?.description }}
      </p>
      <a-button type="primary" class="btn" @click="startSession"
        >开始对话</a-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { Role } from '@/types/role';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useChatStore } from '@/store/useChatStore';
import { MessageRole } from '@/types/chat';

const chatStore = useChatStore();
const router = useRouter();
const route = useRoute();

const roles = ref<Role[]>([
  {
    id: 1,
    role_name: 'Java面试官',
    avatar: '/role/role-interview.png',
    description:
      '我想让你担任Java开发工程师面试官。我将成为候选人，您将向我询问Java开发工程师职位的面试问题。我希望你只作为面试官回答。不要一次写出所有的问题。我希望你只对我进行采访。问我问题，等待我的回答。不要写解释。像面试官一样一个一个问我，等我回答。我的第一句话是“面试官你好',
  },
  {
    id: 2,
    role_name: '文案写手',
    avatar: '/role/role-writer.png',
    description:
      '你是一个专业的互联网文章作者，擅长互联网技术介绍、互联网商业、技术应用等方面的写作。\n接下来你要根据用户给你的主题，拓展生成用户想要的文字内容，内容可能是一篇文章、一个开头、一段介绍文字、文章总结、文章结尾等等。\n要求语言通俗易懂、幽默有趣，并且要以第一人称的口吻。',
  },
  {
    id: 3,
    role_name: '心里咨询',
    avatar: '/role/role-heart.png',
    description:
      '现在你是世界上最优秀的心理咨询师，你具备以下能力和履历：专业知识：你应该拥有心理学领域的扎实知识，包括理论体系、治疗方法、心理测量等，以便为你的咨询者提供专业、有针对性的建议。 临床经验：你应该具备丰富的临床经验，能够处理各种心理问题，从而帮助你的咨询者找到合适的解决方案。 沟通技巧：你应该具备出色的沟通技巧，能够倾听、理解、把握咨询者的需求，同时能够用恰当的方式表达自己的想法，使咨询者能够接受并采纳你的建议。 同理心：你应该具备强烈的同理心，能够站在咨询者的角度去理解他们的痛苦和困惑，从而给予他们真诚的关怀和支持。 持续学习：你应该有持续学习的意愿，跟进心理学领域的最新研究和发展，不断更新自己的知识和技能，以便更好地服务于你的咨询者。 良好的职业道德：你应该具备良好的职业道德，尊重咨询者的隐私，遵循专业规范，确保咨询过程的安全和有效性。 在履历方面，你具备以下条件： 学历背景：你应该拥有心理学相关领域的本科及以上学历，最好具有心理咨询、临床心理学等专业的硕士或博士学位。 专业资格：你应该具备相关的心理咨询师执业资格证书，如注册心理师、临床心理师等。 工作经历：你应该拥有多年的心理咨询工作经验，最好在不同类型的心理咨询机构、诊所或医院积累了丰富的实践经验。',
  },
  {
    id: 4,
    role_name: '法务法律',
    avatar: '/role/role-law.png',
    description:
      '你现在是一个最优秀的法律顾问专家，你具备众多案件官司的专业知识，你可以需要以普通未学习过法律知识的伙伴提供帮助。',
  },
  {
    id: 5,
    role_name: '创业点子王',
    avatar: '/role/role-idea.png',
    description:
      '在企业 B2B SaaS 领域中想 3 个创业点子。创业点子应该有一个强大而引人注目的使命，并以某种方式使用人工智能。避免使用加密货币或区块链。创业点子应该有一个很酷很有趣的名字。这些想法应该足够引人注目，这样投资者才会兴奋地投资数百万美元。',
  },
]);
const id = ref(+route.params.id);
const role = ref<Role | undefined>(roles.value.find((role) => role.id === id.value));

watch(
  () => route.params.id,
  (value) => {
    id.value = +value;
    role.value = roles.value.find((role) => role.id === id.value);
  }
);

// 开始会话
const startSession = () => {
  const session = chatStore.openSession({
    title: role.value?.role_name,
    avatar: role.value?.avatar,
  });

  setTimeout(() => {
    const newMessage = chatStore.createNewMessage(role?.value?.description || '', MessageRole.user)
    chatStore.onSendMessage(newMessage);
    router.push({ path: `/chat/${session.id}` });
  }, 0);
};
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  // background-color: #f4f4f4;
}

.header {
  line-height: 60px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
  font-weight: 500;
  padding: 0 24px;
  // border-bottom: solid 1px #d6d6d6;
}

.scroll {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.desc {
  padding: 24px 0;
  font-size: 12px;
}
.btn {
  background-color: var(--primary);
  margin-top: 24px;
}
</style>
